<template>
  <div> 
    <CleanTypeTop :pagetitle="pagetitle"></CleanTypeTop>
    <div style="padding-top:50px;">
      <div class="orders_con_tab" style="">
        <div class="aui-tab" id="tab">
              <div class="aui-tab-item" v-for="(item,index) of goodtype" @click="goodtypeClick(item,index)" :class="{'aui-active':typeid==index}">{{item.name}}</div>
        </div>
      </div>
      <div class="orders_con_tab1">
        <div class="aui-tab laundryhome_type" id="tab2">
              <div class="aui-tab-item"  v-for = "(vo,index) of goodtypechildren" :class="{'aui-active':tabindex==index}" @click="goodtypechildClick(index)">{{vo.name}}</div>   
        </div>
      </div>
      <div id="laundryhome_lists">
        <ul class="laundryhome_lists">
          <li v-for='(item,index) of washingtype' class="addcar" :key="item.id">
            <div @click.stop.prevent="addCart($event,item,index)"><img :src="item.picurl" alt="图片加载失败"></div>
            <p>{{item.name}}</p>
            <span><span>￥</span><span class="good_price">{{item.price}}</span></span>
            <div class="aui-badge" id="singonumber" v-if="item.count>0">{{item.count}}</div>
          </li>
        </ul>
      </div>
      <div class="laundryhome_promise_box">
        <div class="laundryhome_promise_con">
            <img src="./../../assets/images/promisr_icon_03.jpg" alt="图片加载失败">
            <p>高校服务</p>
        </div>
        <div class="laundryhome_promise_con">
            <img src="./../../assets/images/promisr_icon_05.jpg" alt="图片加载失败">
            <p>没单投保</p>
        </div>
        <div class="laundryhome_promise_con">
            <img src="./../../assets/images/promisr_icon_07.jpg" alt="图片加载失败">
            <p>上门取件</p>
        </div>
      </div>
      <div class="laundryhome_waring" v-if="typeid==0">
        <p>羽绒服，棉衣等厚重衣服预计3-5天送回，皮衣，裘衣预计7-9天送回</p>
        <span @click="Openserviceins('瑞雅清洗说明及不能提供清洗服务义列表',6)">《瑞雅清洗说明及不能提供清洗服务义列表》</span>
      </div>
      <div class="laundryhome_waring" v-if="typeid==1">
          <p>洗鞋预计3-5天送回</p>
          <span @click="Openserviceins('瑞雅清洗说明及不能提供清洗服务义列表',6)">《瑞雅清洗说明及不能提供清洗服务义列表》</span>
      </div>
      <div class="laundryhome_waring" v-if="typeid==2">
          <p>皮具洗护预计5-7天送回</p>
          <span @click="Openserviceins('瑞雅清洗说明及不能提供清洗服务义列表',6)">《瑞雅清洗说明及不能提供清洗服务义列表》</span>
      </div>
      <div class="laundryhome_waring" v-if="typeid==3">
          <p>皮具修复预计10-15天送回</p>
          <span @click="Openserviceins('瑞雅清洗说明及不能提供清洗服务义列表',6)">《瑞雅清洗说明及不能提供清洗服务义列表》</span>
      </div>
      <router-link to='/reservation'>
        <button class="reservation_btn" v-show="totalCount<1" @click="goReservation(0)">立即预约</button>
      </router-link>
      <div class="laundryhome_bottom" v-show="totalCount>0">
          <div class="laundryhome_bottom_t">请等待质检核价后付款，满六十免费上门去送</div>
          <div class="carticon_box" id="end" @click="openCar"><img src="./../../assets/images/cart_icon.png" width="20%">
              <div class="aui-badge" v-show="totalCount>0">{{totalCount}}</div>
          </div>
          <div class="cart_total"><span>预估价格：</span>{{totalPrice}}元</div>
          <div  class="reservation_btn1">
              <button  @click="goReservation(1)">预约取件</button>
          </div>
      </div> 
      <div class="ball-container">
          <div v-for="(ball, index) in balls" :key="index">
            <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
              <div class="ball" v-show="ball.show">
                <div class="inner inner-hook"></div>
              </div>
            </transition>
          </div>
      </div>
      <!-- 弹出购物车列表 -->
     <div class="car_popup" v-if="carshow">
        <div class="car_popup_box">
          <div class="car_popup_top aui-content">
            <div class="aui-pull-left">购物车</div>
            <div class="aui-pull-right" @click="carclear">清空</div>
          </div>
          <div class="car_list">
            <div class="car_li aui-content" v-for="(car,index) in goods">
              <div class="car_li_text aui-pull-left aui-ellipsis-1">{{car.name}}</div>
              <div class="car_li_right aui-pull-right">
                <div class="aui-content">
                  <div class="aui-pull-right car_popup_add" @click="carAdd(car.id)"><img src="./../../assets/images/add.png"></div>
                  <div class="aui-pull-right car_popup_num">{{car.count}}</div>
                  <div class="aui-pull-right car_popup_reduce" @click="carReduce(car.id)"><img src="./../../assets/images/reduce.png"></div>
                  <div class="aui-pull-right car_popup_money">￥{{car.price * car.count}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="car_popup_mask" v-if="carshow" @click="closeCar"></div>
    </div> 
  </div>
</template>
<script>
import CleanTypeTop from './components/CleanTypeTop.vue'
import request from '@/utils/request'
import { loadGoods } from '@/api/allapis'
import Lockr from 'Lockr'
export default{
  name: 'CleanType',
  data(){
    return{
        balls: [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}],
        dropBalls: [],
        totalPrice: 0,
        totalCount: 0,
        cartGoods: {},
        pagetitle: '',//
        tabindex:0,//二级导航索引
        goodtype: [],//全部数据列表
        goodtypechildren: [],//数据下的子分类
        typeid:'',//一级导航索引
        washingtype:[],//子分类列表
        goods:{},//需要传给后台的数据
        carshow: false,//是否显示购物车弹出遮罩层
   
    }
  },
  // mounted() {
  //   this.title = this.$route.query.pagetitle
  // },
  // computed:{
    
  // },
  mounted(){
    var cateobj = this.$route.query.cate//获取传过来的cate
    this.typeid = cateobj//将cate付给一级分类
    this.getData()
  },
  methods: {
    getData(){
      this.$vux.loading.show({ text: 'Loading' })
      loadGoods().then(response=>{
          this.goodtype = response.data.list
          // console.log(this.goodtypechildren)
          // alert(JSON.stringify( this.goodtype))
          // this.defaultgoodtype = ret.data.list[1]
          this.goodtypechildren = this.goodtype[this.typeid].child//拉取相应分类下的子分类 
         // alert(JSON.stringify(this.goodtypechildren))
         // console.log(this.tabindex)
          if(this.goodtype[this.typeid].child==''){
              this.washingtype = this.goodtype[this.typeid].goods_list
              this.$vux.loading.hide()
              // alert(JSON.stringify(this.washingtype))
              // alert(JSON.stringify(this.washingtype))
          }else{
               this.washingtype = this.goodtypechildren[0].goods_list
               this.$vux.loading.hide()
               // alert(JSON.stringify(this.washingtype))
          }
      })
    },
    //一级分类切换
    goodtypeClick:function(item,index){
        this.typeid=index
        // goodcateindex = index-1
        // alert(index)
        // this.default = this.typeid
        this.goodtypechildren = this.goodtype[index].child
        this.tabindex = 0
        this.pagetitle = item.name
        if(this.goodtype[index].child==''){
            this.washingtype = this.goodtype[index].goods_list
        }    
        else{
             this.washingtype = this.goodtypechildren[0].goods_list

        }
  
    },
    //二级分类切换
    goodtypechildClick:function(index){
        this.tabindex = index
        if(this.goodtype[this.typeid].child==''){
            this.washingtype = this.goodtype[index].goods_list
            // alert(JSON.stringify(this.washingtype))
        }else{
            this.washingtype = this.goodtypechildren[index].goods_list

        }
    },
    //跳转到预约页面
    goReservation(type){//type=1时传数据，type为0时不传数据
      if(type = 1){
        Lockr.set('needpushgoods',this.goods)//将所选商品存到本地，避免在预约页面刷新时商品列表丢失
        this.$router.replace({
          name:'Reservation',
          query:{
            needpushgoods:'1'//为‘1’时才能够向预约页面传递数据
          }
        })
      }
      if(type = 0){
        this.$router.replace({
          name:'Reservation',
        })
      }  
    },
    openCar: function() {
        this.carshow = !this.carshow;
    },
    closeCar: function() {
        this.carshow = false;
    },
    carAdd: function(id) {
        //遍历goodtype里的数据，进行加操作
        for (var i = 0; i < this.goodtype.length; i++) {
            var goodchild = this.goodtype[i].child;
            if (goodchild == '') {
                var goodlist = this.goodtype[i].goods_list;
                for (var n = 0; n < goodlist.length; n++) {
                    if (goodlist[n].id == id) {
                        this.goodtype[i].goods_list[n].count++;
                        this.totalCount++;
                        this.totalPrice = parseInt(this.totalPrice) + parseInt(this.goodtype[i].goods_list[n].price);
                        this.goods[id].xiaoji = parseInt(this.goods[id].price) * parseInt(this.goods[id].count);
                    }
                }
            }else {
                for (var k = 0; k < goodchild.length; k++) {
                    var goodlist = goodchild[k].goods_list;
                    for (var j = 0; j < goodlist.length; j++) {
                        if (goodlist[j].id == id) {
                            this.goodtype[i].child[k].goods_list[j].count++;
                            this.totalCount++;
                            this.totalPrice = parseInt(this.totalPrice) + parseInt(this.goodtype[i].child[k].goods_list[j].price)
                            this.goods[id].xiaoji = parseInt(this.goods[id].price) * parseInt(this.goods[id].count);
                        }
                    }
                } 
            }
        } 
    },
    carReduce: function(id) {
        //遍历goodtype里的数据，进行减操作
        for (var i = 0; i < this.goodtype.length; i++) {
            var goodchild = this.goodtype[i].child;
            if (goodchild == '') {
                var goodlist = this.goodtype[i].goods_list;
                for (var n = 0; n < goodlist.length; n++) {
                    if (goodlist[n].id == id) {
                        this.goodtype[i].goods_list[n].count--
                        this.totalCount--;
                        this.totalPrice = parseInt(this.totalPrice) - parseInt(this.goodtype[i].goods_list[n].price);
                        this.goods[id].xiaoji = parseInt(this.goods[id].price) * parseInt(this.goods[id].count);
                        if (this.goodtype[i].goods_list[n].count == 0) {
                            delete this.goods[this.goodtype[i].goods_list[n].id];
                        }
                        if (this.totalCount == 0) {
                            this.carshow = false;
                        }
                    }
                }
            }else {
                for (var k = 0; k < goodchild.length; k++) {
                    var goodlist = goodchild[k].goods_list;
                    for (var j = 0; j < goodlist.length; j++) {
                        if (goodlist[j].id == id) {
                            this.goodtype[i].child[k].goods_list[j].count--
                            this.totalCount--;
                            this.totalPrice = parseInt(this.totalPrice) - parseInt(this.goodtype[i].child[k].goods_list[j].price);
                            this.goods[id].xiaoji = parseInt(this.goods[id].price) * parseInt(this.goods[id].count);
                            if (this.goodtype[i].child[k].goods_list[j].count == 0) {
                                delete this.goods[this.goodtype[i].child[k].goods_list[j].id];
                            }
                            if (this.totalCount == 0) {
                                this.carshow = false;
                            }
                        }
                    }
                } 
            }
        }
    },
    carclear: function() {
        //清空购物车
        this.totalCount = 0;
        this.totalPrice = 0;
        this.goods = {};
        for (var i = 0; i < this.goodtype.length; i++) {
            var goodchild = this.goodtype[i].child;
            if (goodchild == '') {
                var goodlist = this.goodtype[i].goods_list;
                for (var n = 0; n < goodlist.length; n++) {
                    this.goodtype[i].goods_list[n].count = 0;
                }
            }else {
                for (var k = 0; k < goodchild.length; k++) {
                    var goodlist = goodchild[k].goods_list;
                    for (var j = 0; j < goodlist.length; j++) {
                        this.goodtype[i].child[k].goods_list[j].count = 0;
                    }
                } 
            }
        }
        this.closeCar();
    },

    addCart (event,goods, index) {
      // 由于指针的问题, 只用加一次即可
        const carobj = this.washingtype[index]
        const car_goodid = carobj.id
        // this.goodid = carobj.id
        var old_num = carobj.count
        var new_num = old_num + 1
        // this.goodnum = new_num
        this.washingtype[index].count = new_num
        this.totalCount ++
        // var xaioji //商品小计
        // xaioji = parseInt(this.washingtype[index].price) * this.washingtype[index].count
        // alert(xaioji)
        this.totalPrice = parseInt(this.totalPrice) + parseInt(this.washingtype[index].price)
        // alert(JSON.stringify(goods))
        // this.washingtype[index].xiaoji = xaioji
        this.goods[goods.id] = this.washingtype[index]
        this.drop(event.target)
    },
    // freshTotal () {
    //   let total = 0
    //   let count = 0
    //   for(var i in this.washingtype){
    //      total += this.washingtype[i].washingprice * this.washingtype[i].count;
    //      total = Math.round(total * 100) / 100;
    //      count +=this.washingtype[i].count; 
    //   }
    //   this.totalPrice = total
    //   this.totalCount = count

    // },
    drop (el) {
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = el
          this.dropBalls.push(ball)
          return
        }
      }
    },
    beforeDrop (el) {
      // this.freshTotal()
      let count = this.balls.length
      while (count--) {
        let ball = this.balls[count]
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect() // 获取小球的相对于视口的位移(小球高度)
          let x = rect.right - 35 * 2 // 减去小球left
          let y = -(window.innerHeight - rect.top - 28) // 减去小球bottom
          el.style.display = ''
          el.style.webkitTransform = `translate3d(0,${y}px,0)`
          el.style.transform = `translate3d(0,${y}px,0)`
          let inner = el.getElementsByClassName('inner-hook')[0]
          inner.style.webkitTransform = `translate3d(${x}px,0,0)`
          inner.style.transform = `translate3d(${x}px,0,0)`
        }
      }
    },
    dropping (el, done) {
      /* eslint-disable no-unused-vars */
      let rf = el.offsetHeight
      this.$nextTick(() => {
        el.style.webkitTransform = 'translate3d(0,0,0)'
        el.style.transform = 'translate3d(0,0,0)'
        let inner = el.getElementsByClassName('inner-hook')[0]
        inner.style.webkitTransform = 'translate3d(0,0,0)'
        inner.style.transform = 'translate3d(0,0,0)'
        el.addEventListener('transitionend', done) // Vue为了知道过渡的完成，必须设置相应的事件监听器。
      })
    },
    afterDrop (el) {
      let ball = this.dropBalls.shift() // 完成一次动画就删除一个dropBalls的小球
      if (ball) {
        ball.show = false
        el.style.display = 'none' // 隐藏小球
      }
    }
  },
  components:{
    CleanTypeTop,
  }
 
}
</script>
<style>
.ball {
    position: fixed;
    left: 35px;
    bottom: 28px;
    z-index: 9999999;
    transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
}
.inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FF4D4D;
  transition: all 0.4s linear;
}
</style>


